<template>
    <el-card class="page-container">
        <el-container>
            <el-aside  >
                <!-- 左边显示地图-->
                <el-tabs  class="demo-tabs"  @tab-click="handleTabClick">
                    <el-tab-pane label="各级风险等级的贫困户数量分布" >
                        <div id="main" class="map">
                            <Map :deliverCode="deliverCode" :deliverName="deliverName" @mapDataChanged="handleMapDataChange"/>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="主要致贫原因分布" >
                        <div id="main1" class="map">
                            <RiskMap @riskMapChanged="riskMapChanged"></RiskMap>
                        </div>
                    </el-tab-pane>
                </el-tabs>


            </el-aside>
            <el-main >
                <el-card style="width: 445px;height: 580px;padding: 0px" >
                    <template #header style="padding: 0px;">
                        <div class="card-header" >
                            <!-- 显示搜索 栏-->

                            <div style="padding-top: 0 ;padding-bottom: 5px ;font-size: 15px">详细信息筛选:</div>
                            <el-form >
                                <el-row>
                                    <el-form-item label="贫困等级:" style="margin-left: 30px" v-if="showPoor">
                                        <el-select
                                                clearable
                                                filterable
                                                v-model="form.poorlevel"
                                                @change="poolSelect"
                                                placeholder="请选择贫困等级"
                                                style="width: 150px"
                                        >
                                            <el-option label="不贫困" value="0"></el-option>
                                            <el-option label="一般贫困" value="1"></el-option>
                                            <el-option label="中等贫困" value="2"></el-option>
                                            <el-option label="特殊贫困" value="3"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="风险类型:" style="margin-left: 30px" v-if="!showPoor">
                                        <el-select
                                                clearable
                                                filterable
                                                v-model="form.firstid"
                                                @change="riskSelect"
                                                placeholder="请选择风险类型"
                                                style="width: 150px"
                                        >
                                            <el-option label="医疗" value="1"></el-option>
                                            <el-option label="水利" value="2"></el-option>
                                            <el-option label="住房" value="3"></el-option>
                                            <el-option label="紧急" value="4"></el-option>
                                            <el-option label="健康" value="5"></el-option>
                                            <el-option label="教育" value="6"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-row>
                                <el-button type="success" @click="farmerSelect" style="margin-left: 35px">查询</el-button>
                                <el-button  type="primary" @click="resetClick" style="margin-left: 55px">重置</el-button>

                            </el-form >
                        </div>
                    </template >
                    <!-- 放置表格-->
                    <el-table :data="tableData" style="width: 100%;font-size: 12px;margin-bottom: 50px" max-height="500px" @selection-change="handleSelectionChange">
                        <el-table-column fixed prop="name" label="姓名" width="60" />
                        <el-table-column prop="city" label="市" width="70" />
                        <el-table-column prop="county" label="县" width="70" />
                        <el-table-column prop="town" label="乡" width="70" />
                        <el-table-column prop="village" label="村" width="70" />
                        <el-table-column prop="poorlevel" label="贫困等级" v-if="showPoor" width="100"  :formatter="formatPovertyLevel" />
                        <el-table-column prop="firstid" label="风险类型" v-if="!showPoor" width="100" :formatter="formatRiskType"/>
                    </el-table>


                </el-card>
            </el-main>
        </el-container>

    </el-card>
</template>
<script setup>

    import {onMounted, ref,reactive } from 'vue'
    import{searchByArea} from "../../api/farmer";
    import  Map  from './all/Map.vue'
    import RiskMap from './all/RiskMap.vue'
    import {searchInfo} from "@/api/farmer";
    //区县选择器
    import {RegionSelects} from 'v-region'
    let tabName='各级风险等级的贫困户数量分布'
    let region=ref({province: '130000',city: '', area: ''})
    const mydata=ref()
    const riskForm=reactive({city: '', country: '', town: '',village:'',poorlevel:""})
    const form =reactive({city: '', country: '', town: '',village:'',poorlevel:""})

    //向Map传递的行政编号
    const deliverName=ref("河北省")
    const deliverCode = ref("130000");
    //区域选择改变事件
    const showPoor=ref(true);

    //tab改变事件
    const handleTabClick=(tab)=> {
        // tab 参数包含了当前选中 tab 的相关信息，比如名称、标签等
        console.log('当前激活的 tab 为：', tab.props.label);

        // 根据不同的 tab 名称执行不同的逻辑
        switch (tab.props.label) {
            case '各级风险等级的贫困户数量分布':
                // 在这里执行与“各级风险等级的贫困户数量分布”相关的逻辑
                tabName=tab.props.label;
                showPoor.value=true;
                myPage()
                break;
            case '主要致贫原因分布':
                tabName=tab.props.label;
                showPoor.value=false;
                myPage()
                break;
            // 可以继续添加更多 case 处理其他 tab
        }
    }
    //确认搜索
    const farmerSelect=()=>{
        //mydata.value.area为undefined时将form.country设置为空字符串，
        // 可以使用可选链结合逻辑OR运算符（||）来实现这一逻辑。
        // 可选链确保不会在undefined上尝试访问.value，而逻辑OR运算符则允许你提供一个默认值
        /* deliverCode.value =mydata.value.city?.key|| '130000'
         deliverName.value=mydata.value.city?.value||"河北省"
              console.log('1111111111111父传子数据')
              console.log(deliverCode.value  )
             form.city=mydata.value.city?.value|| ''
             form.country=mydata.value.area?.value|| ''
            // form.town=mydata.value.town?.value|| ''

         console.log('搜索数据')
         console.log(form)*/
        // console.log("惊醒搜素")
        myPage()
    }
    //重置回到所有的河北省
    const resetClick=()=>{

        form.poorlevel=""
        form.firstid=""

        myPage()
    }


    const tableData = ref([]); // table数据

    onMounted(()=>{

        myPage()
    })

    //处理从子传来的数据
    const  handleMapDataChange=async(data)=>{
        //await this.$nextTick();
        // console.log('从子组件接收到的数据:', data);
        if(data.name=="河北省"){
            region.value.province="130000"
            region.value.city=''
            form.city=''

        }
        else{
            region.value.province="130000"
            region.value.city=data.code
            form.city=data.name

        }

        console.log("region")
        console.log(region.value)
        myPage()
    }

    const riskMapChanged=async(data)=>{
        if(data.name=="河北省"){
            region.value.province="130000"
            region.value.city=''
            form.city=''

        }
        else{
            region.value.province="130000"
            region.value.city=data.code
            form.city=data.name

        }

        console.log("region")
        console.log(region.value)
        myPage()
    }
    //贫困等级发生变化
    const poolSelect=()=>{
        console.log("贫困等级")
        console.log(form.poorlevel)
        console.log("贫困等级")
    }
    //风险类型发生变化
    const riskSelect=()=>{
        console.log("风险类型")
        console.log(form.firstid)
        console.log("风险类型")
    }

    //页面初始化
    const myPage = () => {

        console.log(tabName)
        if(tabName=="各级风险等级的贫困户数量分布"){
            console.log("hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh")
            console.log(form)
            searchByArea(form).then((res) => {
                console.log("searchInfo1111111111111111111111111111")
                console.log(res)
                tableData.value=res.data
                console.log("11111111111111111111111")

            });
        }
        else if(tabName=="主要致贫原因分布"){
            searchInfo(form).then((res) => {
                console.log("searchInfo1111111111111111111111111111")
                console.log(res)
                tableData.value=res.data
                console.log("11111111111111111111111")

            });
        }


    }
    const formatPovertyLevel=(row, column, cellValue)=>{
        // 根据 cellValue（即 poorlevel 的值）来决定显示内容
        if(cellValue === 0)
            return '不贫困'
        else if(cellValue === 1)
            return '一般贫困'
        else if(cellValue === 2)
            return '中等贫困'
        else if(cellValue === 3)
            return '特殊贫困'

    }

    const formatRiskType=(row, column, cellValue)=>{
        if(cellValue === 1)
            return '医疗'
        else if(cellValue === 2)
            return '水利'
        else if(cellValue === 3)
            return '住房'
        else if(cellValue === 4)
            return '紧急'
        else if(cellValue === 5)
            return '健康'
        else if(cellValue === 6)
            return '教育'
    }
</script>

<style lang="scss" scoped>
    .page-container {
        min-height: 100%;
        box-sizing: border-box;
        padding-top: 0;

        .header {
            padding-top: 2px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }
    .el-container{
        margin-top: 0;
        height: 600px;
        padding-top: 0;
    }
    .el-aside {
        width: 700px;
        /* background-color: lightpink;*/
    }

    .el-main {
        /* background-color: green;*/
        padding: 1px;
    }
    .map{
        background-color: lightblue;
        height: 530px;
        margin-right: 20px;
    }

    .card-header{
        padding-top: 0px;
        height: 100px;
    }


    .item{
        padding-top: 30px;

    }





</style>